<template>
  <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <h1 style="float: left;line-height: 60px;font-size: 20px;padding: 0 20px">山东财经大学区块链打卡辅助平台</h1>
    <el-menu-item index="1" style="float:right;margin: 0 60px;">后台管理系统</el-menu-item>
  </el-menu>
  <el-container>
    <el-main>
      <el-table
          :data="showData"
          style="width: 100%"
          height="650">
        <el-table-column type="index" fixed>
        </el-table-column>
        <el-table-column
            fixed
            prop="school_id"
            label="学号"
            width="115">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="70">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            width="160"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            label="性别"
            width="60">
          <template #default="scope">
            {{ scope.row.sex === 1 ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column
            label="学院"
            :filters="collegesFilter"
            :filter-method="filterCollege"
            :show-overflow-tooltip="true"
            width="140">
          <template #default="scope">
            {{ colleges[scope.row.college_id] }}
          </template>
        </el-table-column>
        <el-table-column
            prop="province"
            label="省份"
            width="80"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="city"
            label="城市"
            width="80"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            :show-overflow-tooltip="true"
            prop="now_address"
            label="当前所在地"
            width="180">
        </el-table-column>
        <el-table-column
            prop="addTime"
            label="添加时间"
            sortable
            width="160">
        </el-table-column>
        <el-table-column
            prop="expireTime"
            label="过期时间"
            sortable
            width="100">
        </el-table-column>
        <el-table-column
            width="80"
            align="center"
            label="状态"
        >
          <template #default="scope">
            <el-switch :loading="loading" @change="up_active(scope.row)" v-model="scope.row.active"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            width="120"
            align="center"
        >
          <template #header>
            <el-input
                @change="filterValues"
                v-model="search"
                size="mini"
                maxlength="12"
                placeholder=""/>
          </template>
          <template #default="scope">
            <el-button type="text" size="small" @click="$router.push('/wwwww/user/'+scope.row.school_id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "admin",
  data() {
    return {
      tableData: [],
      showData: [],
      collegesFilter: [],
      colleges: {},
      search: '',
      loading: true
    }
  },
  methods: {
    filterValues(value) {
      this.showData = this.tableData.filter((data) => {
        return data['school_id'].indexOf(value) !== -1
      })
    },
    filterCollege(value, row) {
      return row.college_id == value
    },
    up_active(data) {
      this.$axios.post('/api/up/active', {
        school_id: data.school_id,
        active: data.active
      }).then((res) => {
        if (res.data === 0) {
          this.$ElMessage.success({message: '已开启签到'})
        } else if (res.data === 1) {
          this.$ElMessage.error({message: '已关闭签到'})
        } else {
          this.$ElMessage.error({message: '修改失败'})
          data.active = !data.active
        }
      }).catch((res) => {
        this.$ElMessage.error({message: '修改失败'})
        data.active = !data.active
      })
    }
  },
  mounted() {
    for (let i = 0; i < this.$college.length; i++) {
      this.colleges[this.$college[i][0]] = this.$college[i][1]
      this.collegesFilter.push({'text': this.$college[i][1], 'value': this.$college[i][0]})
    }
    this.$axios.post('/api/admin/user').then((res) => {
      this.tableData = res.data
      this.showData = res.data
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].active = this.tableData[i].active == 1
        this.showData[i].active = this.showData[i].active == 1
      }
      this.loading = false
    })
  }
}
</script>

<style scoped>

</style>